<template>
	<view>
		<!-- 用户未登录 -->
		<view class="user" v-if="!istoken" @tap="showlogin">
			<!-- <image :src="img" mode=""></image> -->
			<view class="flex">
				<u-avatar :src="img" class="image" size="160rpx"></u-avatar>
				<text>点击登录</text>
			</view>
			<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
		</view>
		<!-- 登录 -->
		<view class="user" v-if="istoken">
			<!-- <image :src="img" mode=""></image> -->
			<view class="flex">
				<u-avatar :src="userInfo.avatar" class="image" size="160rpx"></u-avatar>
				<text>{{ userInfo.username }}</text>
			</view>
			<u-icon name="close" color="#fff" size="28" @tap="closelogin"></u-icon>
		</view>
		<!-- 宫格 -->

		<view class="gird">
			<u-grid :col="3" border class="gird_box">
				<u-grid-item v-for="(item, index) in list" :key="index" class="item">
					<u-icon :name="item.icon" :size="46"></u-icon>
					<view class="grid-text">{{ item.name }}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 登录-->
		<view class="" v-show="isShowlogin">
			<view class="bg" @tap="get2"></view>
			<view class="login">
				<view class="user2">
					<text>用户名</text>
					<u-input v-model="user2" type="type" border="true" placeholder="用户名" placeholder-style="color: #bbc6d4;" v-if="!isinputuser" @input="inputuser" />
					<u-input v-model="user2" type="type" border="true" placeholder="用户名" placeholder-style="color: red;" v-if="isinputuser" @input="inputuser" />
					<text class="pos" v-show="isinputuser">请填写用户名</text>
				</view>
				<view class="pass">
					<text>密码</text>
					<u-input v-model="pass" type="password" border="true" placeholder="密码" placeholder-style="color: #bbc6d4;" v-if="!isinputpass" @input="inputpass" />
					<u-input v-model="pass" type="password" border="true" placeholder="密码" placeholder-style="color: red;" v-if="isinputpass" @input="inputpass" />
					<text class="pos" v-show="isinputpass">请填写密码</text>
				</view>
				<u-button type="error" shape="circle" @tap="get" class="btn">登录/注册</u-button>
			</view>
			<!-- <button>按钮</button> -->
		</view>
		<tab></tab>
	</view>
</template>

<script>
import tab from '@/custom-tab-bar/index.vue';
import { loginByWeb } from '../../utils/api.js';
import { mapState } from 'vuex';
import { mapMutations } from 'vuex';

export default {
	components: {
		tab
	},
	data() {
		return {
			isinputuser: false,
			isinputpass: false,
			user2: '',
			pass: '',
			type: '用户名',
			img:
				'',

			list: [
				{ name: '我的订单', icon: 'order' },
				{ name: '优惠券', icon: 'coupon' },
				{ name: '礼品卡', icon: 'bag' },
				{ name: '我的收藏', icon: 'map' },
				{ name: '我的足迹', icon: 'car' },
				{ name: '会员福利', icon: 'account' },
				{ name: '地址管理', icon: 'calendar' },
				{ name: '账号安全', icon: 'warning' },
				{ name: '联系客服', icon: 'kefu-ermai' },
				{ name: '帮助中心', icon: 'question-circle' },
				{ name: '意见反馈', icon: 'share-square' }
			]
		};
	},
	computed: {
		...mapState({
			isShowlogin: state => state.login.isShowlogin,
			istoken: state => state.login.istoken,
			userInfo: state => state.login.userInfo
		})
	},
	onShow() {
		this.$store.commit('changevalue', 4);
		// let userInfo = uni.getStorageSync('userInfo');
		// console.log(userInfo);
		// this.username = userInfo.username;
		// this.pass = userInfo.pass;
		// this.get();
	},
	methods: {
		// 输入账号
		inputuser() {
			// console.log('输入账号');
			this.user();
			return false;
		},
		inputpass() {
			// console.log('输入密码');
			this.passw();
			return false;
		},
		...mapMutations({
			changeisShowlogin: 'login/changeisShowlogin',
			changeistoken: 'login/changeistoken',
			changeuserInfo: 'login/changeuserInfo'
		}),
		// 登录
		showlogin() {
			// console.log('登录');
			this.isinputuser = false;
			this.isinputpass = false;
			this.changeisShowlogin(true);
		},
		// 退出
		closelogin() {
			uni.showModal({
				title: '退出账号确认',
				content: '您是否想要退出当前账号',
				confirmColor: '#EE0A24',

				success: res => {
					if (res.confirm) {
						this.changeistoken(false);
						uni.showToast({
							title: '退出登录成功'
						});
					} else if (res.cancel) {
						// console.log('点击了取消');
						this.get2();
					}
				}
			});
		},
		user() {
			if (!this.user2) {
				// console.log('用户名');
				this.isinputuser = true;
				return;
			} else {
				this.isinputuser = false;
			}
		},
		passw() {
			if (!this.pass) {
				// console.log('密码');
				this.isinputpass = true;
				return;
			} else {
				this.isinputpass = false;
				return true;
			}
		},

		async get() {
			// 判断是否登录成功
			this.user();
			if (!this.passw()) return;
			let res = await loginByWeb({
				username: this.user2,
				pwd: this.pass
			});
			// let res = await loginByWeb();
			console.log(res);
			// this.isinputpass = false;
			// this.isinputuser = false;
			if (res.errno == 0) {
				let token = res.data.token;
				let userInfo = res.data.userInfo;
				console.log(token);
				console.log(userInfo);
				this.changeistoken(token);
				uni.setStorageSync('userInfo', { username: this.user2, pwd: this.pass });
				uni.setStorageSync('X-Nideshop-Token',token)
				this.changeuserInfo(userInfo);
				this.changeisShowlogin(false);
				// 清空文本
				this.user2 = '';
				this.pass = '';

				// 登录成功
				uni.showToast({
					title: '登录成功'
				});
			}
		},
		get2() {
			this.changeisShowlogin(false);
		}
	}
};
</script>

<style scoped lang="scss">
page {
	background-color: #eee;
}
.btn {
	z-index: 2 !important;
	position: relative !important;
}
.red {
	color: red !important;
}
.gird {
	margin-bottom: 20rpx;
	height: 1040rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.gird_box {
		height: 100% !important;
	}
	.item {
		background-color: #fff !important;
	}
}
.grid-text {
	font-size: 28rpx;
	margin-top: 4rpx;
	color: var(--price-color);
}
/deep/ .u-grid-item {
	height: 260rpx !important;
}

.user {
	background-color: #fff;
	height: 220rpx;
	background-color: #333333;
	display: flex;
	color: #fff;
	align-items: center;
	justify-content: space-between;
	padding: 10rpx 20rpx;
	box-sizing: border-box;
	.flex {
		display: flex;
		align-items: center;
		text {
			margin-left: 30rpx;
		}
	}
}
.bg {
	background-color: #555;
	position: absolute;
	width: 100vh;
	height: 100ch;
	top: 0;
	left: 0;
	opacity: 0.7;
}
.login {
	z-index: 1;
	opacity: 1;
	width: 90vw;
	margin: auto;
	position: fixed;
	top: 427rpx;
	left: 38rpx;
	background-color: #fff;
	padding: 40rpx 20rpx 50rpx;
	box-sizing: border-box;
	text {
		width: 150rpx;
	}
	.user2,
	.pass {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding: 40rpx 0;
		position: relative;
		.pos {
			position: absolute;
			color: red;
			bottom: 10rpx;
			left: 170rpx;
			width: 260rpx;
			font-size: 30rpx;
		}
	}
	.u-button--error {
		margin-top: 20rpx;
		background-color: #ee0a24;
	}
}
</style>